<template>
    <div>
        <Fade>
            <div v-show="this.$store.state.data">
                <router-view></router-view>
            </div>
        </Fade>
        <van-tabbar v-model="active" v-show="!this.$route.meta.isNav">
            <van-tabbar-item @click="goMovie(item.path)" v-for="(item,index) of arr" :key="index">
                <span>{{item.title}}</span>
                <template #icon="props">
                    <img :src="props.active ? item.icon : item.iconBefore" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>

    
</template>

<script>
import Fade from '../components/Fade'
export default {
    components:{
        Fade
    },
    data() {
        return {
            active:0,
            arr:[
                    { 
                        path:'/tab/films/nowPlaying',
                        icon:require('@/assets/movie.png'),
                        iconBefore:require('@/assets/movie-before.png'),
                        title:'电影'
                    },
                    {
                        path:'',
                        icon:require('@/assets/cinema.png'),
                        iconBefore:require('@/assets/cinema-before.png'),
                        title:'影院'
                    },
                    {
                        path:'/tab/info',
                        icon:require('@/assets/cinema.png'),
                        iconBefore:require('@/assets/zixun-before.png'),
                        title:'资讯'
                    },
                    {
                        path:'/tab/personal',
                        icon:require('@/assets/my.png'),
                        iconBefore:require('@/assets/my-before.png'),
                        title:'我的'
                    }
            ]
        }
    },
    mounted() {
        this.$store.commit('setState',true)
    },
    methods: {
        goMovie(path){
           this.$store.commit('setState',false)
            setTimeout(()=>{
                this.$router.push(path)
                this.$store.commit('setState',true)
            },500)
        }
    }
}
</script>

<style scoped>

</style>